<template>
  <div :class="{hide : !showConfig}" v-if="showConfig">
              <pre class="line-numbers" >
                <code :class="languageClass">
{{configSource}}
                </code>
              </pre>
  </div>
</template>

<script>
    export default {
        name: "global-code",
        data : function(){
          return {
            showConfig : false,
            configSource : '',
            languageClass : '',
            group : "",
            unit : "",
            version : "",
            profile : "",
          }
        },
        methods : {
          loadData : function(){
            if(this.versionId == ""){
              return;
            }
            this.showConfig =false;
            this.$post("/dependency/getGlobalVersionConfig",this.coordinate).then(data => {
              this.configSource = "";
              this.configType = "PROPERTIES";
              for(var key in data){
                this.configSource += key;
                this.configSource += "=";
                this.configSource += data[key];
                this.configSource += "\n";
              }
              var type = 0;
              this.insertConfig(type,this.configSource);
            });
          },
          insertConfig(type,data){
            if(type == 0){
              //properties
              this.languageClass = "language-properties";
            }else{
              //yaml
              this.languageClass = "language-yaml";
            }
            this.configSource = data;

            this.renderLanguageStyle();
          },
          renderLanguageStyle(){
            this.showConfig =true;
            var that = this;
            setTimeout(function(){
              Prism.highlightAll(true);
              that.showConfig =true;
            },50);
          },

        },
        watch : {
          coordinate(){
            this.loadData();
          }
        },

        mounted : function(){
          this.loadData();
        },
        props : ['coordinate']
    }
</script>

<style scoped>
  .hide{display: none;}
</style>
